<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>用户编辑-blog</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" th:href="@{/X-admin/css/font.css}">
    <link rel="stylesheet" th:href="@{/X-admin/css/xadmin.css}">
    <script type="text/javascript" th:src="@{/X-admin/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/X-admin/js/xadmin.js}" charset="utf-8"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .layui-upload-img {
            width: 92px;
            height: 92px;
            margin: 0 10px 10px 0;
        }
    </style>
</head>

<body>
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>头像</label>
                <div class="layui-inline layui-upload-list">
                    <img class="layui-upload-img" id="authorImg"
                         th:src="@{{authorImg}(authorImg=${session.authorImg.configValue})}">
                    <p id="uploadErrorText"></p>
                </div>
                <div class="layui-inline">
                    <button type="button" class="layui-btn" id="previewImg">预览图片</button>
                    <button type="button" class="layui-btn" id="uploadImg">开始上传</button>
                    <input name="sysAuthorImg" type="hidden" id="authorImgUrl" th:value="${session.authorImg.configValue}">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_userName" class="layui-form-label">
                    <span class="x-red">*</span>登录名</label>
                <div class="layui-input-inline">
                    <input type="text" id="L_userName" name="userName" lay-verify="required"
                           autocomplete="off" class="layui-input" th:value="${session.loginUserName}"></div>
            </div>
            <div class="layui-form-item">
                <label for="L_nickName" class="layui-form-label">
                    <span class="x-red">*</span>昵称</label>
                <div class="layui-input-inline">
                    <input type="text" id="L_nickName" name="nickName" lay-verify="required|nickName"
                           autocomplete="off" class="layui-input" th:value="${session.loginNickName}"></div>
            </div>
            <div class="layui-form-item">
                <label for="L_oldPwd" class="layui-form-label">
                    <span class="x-red">*</span>旧密码</label>
                <div class="layui-input-inline">
                    <input type="password" id="L_oldPwd" name="oldPwd" lay-verify="required|oldPwd" autocomplete="off"
                           class="layui-input"></div>
            </div>
            <div class="layui-form-item">
                <label for="L_newPwd" class="layui-form-label">
                    <span class="x-red">*</span>新密码</label>
                <div class="layui-input-inline">
                    <input type="password" id="L_newPwd" name="newPwd" lay-verify="required|newPwd" autocomplete="off"
                           class="layui-input"></div>
                <div class="layui-form-mid layui-word-aux">6到16个字符</div>
            </div>
            <div class="layui-form-item">
                <label for="L_confirmPwd" class="layui-form-label">
                    <span class="x-red">*</span>确认密码</label>
                <div class="layui-input-inline">
                    <input type="password" id="L_confirmPwd" name="confirmPwd" lay-verify="required|confirmPwd"
                           autocomplete="off" class="layui-input"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <button class="layui-btn" lay-filter="submit" lay-submit="">保存</button>
            </div>
        </div>
    </div>
</div>
<script>

    layui.use(['form', 'layer', 'upload'], function () {
        $ = layui.jquery;
        var form = layui.form,
            upload = layui.upload,
            layer = layui.layer;

        //选完文件后不自动上传
        var uploadInst = upload.render({
            elem: '#previewImg'
            , url: '/admin/upload/authorImg/'
            , auto: false
            , bindAction: '#uploadImg'
            , choose: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#authorImg').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                if (res.resultCode == 200) {
                    $("#authorImgUrl").val(res.data);
                    return layer.msg('上传成功');
                } else {
                    return layer.msg('上传失败');
                }
            }
            , error: function () {
                //演示失败状态，并实现重传
                var uploadErrorText = $('#uploadErrorText');
                uploadErrorText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs upload-reload">重试</a>');
                uploadErrorText.find('.upload-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });

        //自定义验证规则
        form.verify({
            nickName: function (value) {
                if (value.length < 2) {
                    return '昵称至少得2个字符啊';
                }
            },
            oldPwd: function (value, item) {
                var resultCode;
                $.ajax({
                    url: "/admin/v1/password",
                    type: "GET",
                    async: false,       //关闭异步
                    data: {"oldPwd": value},
                    success: function (s) {
                        resultCode = s.resultCode;
                    }
                });
                if (resultCode != 200) {
                    return '旧密码错误，请重新输入！';
                }
            },
            newPwd: [/(.+){6,12}$/, '密码必须6到12位'],
            confirmPwd: function (value) {
                if ($('#L_newPwd').val() != $('#L_confirmPwd').val()) {
                    return '两次密码不一致';
                }
            }
        });

        //监听提交
        form.on('submit(submit)', function (data) {
            console.log(data.field);
            $.ajax({
                url: "/admin/v1/userInfo",
                type: "post",
                data: data.field,
                success: function (s) {
                    if (s.resultCode == 200) {
                        layer.alert("修改成功，即将跳转登录页", {
                                icon: 6
                            }, function (index) {
                                parent.layer.closeAll();
                                parent.location.href = s.data;
                            });
                    } else {
                        layer.msg(s.message, function () {
                        });
                    }
                },
                error: function () {
                    layer.msg("接口异常!", function () {
                    });
                }
            });
        });

    });
</script>
</body>

</html>